<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">

</head>
<body>
<div id="app">
  <el-container>
    <el-header height="70px" style="background-color:#386582">
        <h1 style="font-size: 30px;margin: 0;color: white;line-height: 70px">烘焙馆后台管理系统
          <span style="float:right;font-size: 25px;position:relative;">欢迎{{user.nickName}}回来!
                        <a href="javascript:void(0)" style="color: orange" @click="logout()">退出登录</a></span>
        </h1>
    </el-header>
    <el-container>
      <el-aside width="200px" style="overflow:hidden;">


            <el-menu style="height: 1000px"
                    :default-active="activeIndex"
                    @select="sideNavHandleSelect"
                    class="el-menu-vertical-demo"
                    active-text-color="orange"
                    unique-opened
                    style="margin: 15px;">
              <a href="/">
                <img src="../imgs/icon/icon01.png" alt="" width="150px">
              </a>
                <el-divider></el-divider>
              <el-menu-item index="-1">
                <template slot="title">
                  <i class="el-icon-user"></i>
                  <span>用户管理</span>
                </template>
              </el-menu-item>
              <el-menu-item index="-2">
                <i class="el-icon-picture-outline-round"></i>
                <span>首页顶部轮播图</span>
              </el-menu-item>
              <el-menu-item index="1">
                <i class="el-icon-s-order"></i>
                <span>烘焙食谱</span>
              </el-menu-item>
              <el-menu-item index="2">
                <i class="el-icon-video-camera"></i>
                <span>烘焙视频</span>
              </el-menu-item>
              <el-menu-item index="3">
                <i class="el-icon-chat-line-square"></i>
                <span>行业资讯</span>
              </el-menu-item>
            </el-menu>

      </el-aside>
      <el-main>
        <el-tabs v-if="activeIndex>0" v-model="categoryId" @tab-click="tabClick" type="card">
          <el-tab-pane label="全部" name="-1"></el-tab-pane>
          <el-tab-pane v-for="item in categoryArr" :label="item.name" :name="item.id"></el-tab-pane>
        </el-tabs>
        <!--用户表格开始-->
        <el-table
                v-if="activeIndex=='-1'"
                :data="tableDataArr">
          <el-table-column
                  type="index"
                  label="编号">
          </el-table-column>

          <el-table-column
                  label="用户头像">
            <template slot-scope="scope">
              <el-avatar  :src="scope.row.imgUrl" ></el-avatar>
            </template>
          </el-table-column>
          <el-table-column
                  prop="nickName"
                  label="昵称">
          </el-table-column>
          <el-table-column
                  prop="userName"
                  label="用户名">
          </el-table-column>
          <el-table-column
                  label="管理员">
            <template slot-scope="scope">
            <el-switch v-model="scope.row.isAdmin" @change="changeAdmin(scope.row)"></el-switch>
            </template>
          </el-table-column>
          <el-table-column
                  prop="createTime"
                  label="创建时间">
          </el-table-column>

          <el-table-column
                  fixed="right"
                  label="操作"
                  width="100">
            <template slot-scope="scope">
              <el-popconfirm @confirm="delUser(scope.$index,scope.row)"
                             title="您确认删除此用户吗？">
                <el-button slot="reference"
                           type="danger">删除
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!--用户表格结束-->
        <!--轮播图表格开始-->
        <el-table
                v-if="activeIndex=='-2'"
                :data="tableDataArr">
          <el-table-column
                  type="index"
                  label="编号">
          </el-table-column>

          <el-table-column
                  label="轮播图">
            <template slot-scope="scope">
              <img  :src="scope.row.value" width="200px"></img>
            </template>
          </el-table-column>
          <el-table-column
                  prop="code"
                  label="编码">
          </el-table-column>

          <el-table-column
                  prop="createTime"
                  label="创建时间">
          </el-table-column>

          <el-table-column
                  fixed="right"
                  label="操作"
                  width="100">
            <template slot-scope="scope">
              <el-popconfirm @confirm="delBanner(scope.$index,scope.row)"
                             title="您确认删除此轮播图吗？">
                <el-button slot="reference"
                           type="danger">删除
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!--轮播图表格结束-->
        <!--内容表格开始-->
        <el-table v-if="activeIndex>0"
                  :data="tableDataArr"
                  border
                  style="width: 100%">
          <el-table-column
                  type="index"
                  label="编号" width="50px">
          </el-table-column>
          <el-table-column width="150px"
                           prop="title"
                           label="标题"
                           align="center">
          </el-table-column>
          <el-table-column width="60px"
                           label="封面"
                           align="center">
            <template slot-scope="scope">
              <img :src="scope.row.imgUrl" width="30px" height="30px">
            </template>
          </el-table-column>
          </el-table-column>

          <el-table-column v-if="activeIndex!=2" width="300"
                           prop="brief"
                           label="摘要"
                           align="center">
          </el-table-column>
          <el-table-column
                  prop="categoryName"
                  label="类型"
                  align="center">
          </el-table-column>
          <el-table-column
                  prop="viewCount"
                  label="浏览量"
                  align="center">
          </el-table-column>
          <el-table-column
                  prop="commentCount"
                  label="回复量"
                  align="center">
          </el-table-column>
          <el-table-column width="200px"
                           prop="createTime"
                           label="创建时间"
                           align="center">
          </el-table-column>
          <el-table-column width="200px"
                           fixed="right"
                           label="操作"
                           width="100"
                           align="center">
            <template slot-scope="scope">
              <el-button type="success" @click="edit(scope.$index,scope.row)">编辑</el-button>
              <el-popconfirm @confirm="del(scope.$index, scope.row)"
                             title="您确认删除此内容吗？">
                <el-button slot="reference"
                           type="danger">删除
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!--内容表格结束-->

      </el-main>
    </el-container>
  </el-container>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script src="js/common.js"></script>
<script>
 let v = new Vue({
    el: '#app',
    data: function() {
      return {
        activeIndex:"-1",
        categoryArr:[],
        tableDataArr:[],
        categoryId:"-1",
        user:getLocalUser()
      }
    },
   methods:{
     delBanner(i,code){
        v.tableDataArr.splice(i,1);
     },
     logout(){
       if (confirm("您确认退出登录吗?")){
         axios.get("/api/user/logout").then(function () {
           localStorage.clear();
           location.href = "/login.html";
         })
       }
     },
     del(i,content){
       axios.get("/api/content/deleteById?id="+content.id).then(function () {
         v.arr.splice(i,1);
       })
     },
     edit(i,content){
       location.href="/postContent.html?id="+content.id+"&type="+content.type;
     },
     delUser(i,user){
       axios.get("/api/user/delete?id="+user.id).then(function (res) {
         v.$message.success("删除完成!");
         v.tableDataArr.splice(i,1);
       })
     },
     changeAdmin(user){
       axios.get("/api/user/changeAdmin?id="+user.id+"&isAdmin="+(user.isAdmin?1:0)).then(function (res) {
         v.$message.success("修改完成!");
       })
     },
      loadUserList(){
        axios.get("/api/user/getUserList").then(function (response) {
          if (response.data.code==3200){
            alert("非常抱歉！当前登录的是非管理员账户！");
            location.href = "/";
          }else{
            v.tableDataArr = response.data.data;
          }

        })
      },
     sideNavHandleSelect(key,keyPath){
       v.activeIndex = key;
        if (key==-1){
         this.loadUserList();
        }else if (key==-2){
          axios.get("/api/code/selectForAdmin").then(function (response) {
            v.tableDataArr = response.data;
          })
        }else{
          axios.get("/api/category/getCategoryListByType?type="+key).then(function (response) {
            v.categoryArr = response.data;
            v.categoryId="-1";
          })
          //请求内容
          axios.get("/api/content/getContentListForAdminByType?type="+key).then(function (response) {
            v.tableDataArr = response.data;
          })
        }
     },
     tabClick(){
       let url = v.categoryId=="-1"?"/api/content/getContentListForAdminByType?type="+v.activeIndex:"/api/content/getContentListForAdminByType?type="+v.activeIndex+"&categoryId="+v.categoryId
       console.log(url);
       //请求内容
       axios.get(url).then(function (response) {
         v.tableDataArr = response.data;
       })
     }
   },
   created:function () {
     this.loadUserList();
   }
  })
</script>
</html>